<template>
  <div class="hot-comment">
    <div class="hot-title">
      <p>热门推荐</p>
    </div>
    <div class="hot-display">
      <div class="hot-display-con" v-for="item in product" :key="item.id">
        <img :src="item.image" alt="" />
        <div class="price">
          <p>{{ item.storeName }}</p>
          <span><em>￥</em>{{ item.price }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HotSearch",

  data() {
    return {
      product: [],
    };
  },

  methods: {},
  async created() {
    // 商品搜索
    const {
      data: {
        data: { list },
      },
    } = await this.$requestTools(
      "https://apif.java.crmeb.net/api/front/index/product/1",
      "GET",
      {
        params: {
          page: 1,
          limit: 10,
        },
      }
    );
    this.product = list;
  },
};
</script>

<style lang="scss" scoped>
.hot-comment {
  .hot-title {
    background-color: #fff;
    p {
      padding: 20px;
      text-align: center;
    }
  }
  .hot-display {
    background-color: #fff;
    padding: 0 10px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .hot-display-con {
      width: 48%;
      img {
        width: 166px;
        height: 166px;
        border-radius: 10px;
      }
      .price {
        width: 100%;
        margin: 5px 0;
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 14px;
          color: #282828;
        }
        span {
          font-weight: bolder;
          color: #ff448f;
          font-size: 14px;
          margin-bottom: 5px;
          em {
            font-size: 11px;
            font-style: normal;
            font-weight: normal;
          }
        }
      }
    }
  }
}
</style>
